<!-- 图片列表 -->
<template>
  <a-checkbox-group :value="photoDelIds" class="urlListBox _mt-20" @change="onChange">
    <div v-for="(item, index) in photoList" :key="item.id">
      <ImgOrVideo :item="item" type="image" preview :previewList="photoList.map(v=> v.url)" addWarehouse>
        <template slot="checked">
          <a-checkbox :value="item.id" :key="item.id" :disabled="!isPhotoBatchDel" />
        </template>
      </ImgOrVideo>
      <div class="_pt-5 ov-2" style="text-align: center;">{{ item.name }}</div>
    </div>
  </a-checkbox-group>
</template>

<script>
import ImgOrVideo from '@/components/ImgOrVideo'
import { mapGetters, mapActions } from 'vuex'
export default {
  components: {
    ImgOrVideo
  },
  data() {
    return {
      show: false
    }
  },
  computed: {
    ...mapGetters(['photoList', 'isPhotoBatchDel', 'photoDelIds'])
  },
  watch: {},
  methods: {
    ...mapActions(['SetPhotoDelIds']),
    onChange(val) {
      this.SetPhotoDelIds(val)
    }
  },
}
</script>
<style scoped lang="less">
.urlListBox {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill, 180px);
}
</style>
